<template>
	<view class="m-item" :id="'message'+id">
		<view class="m-left">
			<image class="head_icon" src="../static/icon/img_default_head.png" v-if="message.user=='home'"></image>
		</view>
		<!-- 消息内容 -->
		<view class="m-content">
			<view class="m-content-head" :class="{'m-content-head-right':message.user=='customer'}" >
				<view :class="'m-content-head-'+message.user">
					<text  v-if="message.type=='RC:TxtMsg'">{{message.content}}</text>
					<image v-if="message.type=='image'" class="imageitem" :src="message.content" mode=""></image>
				 </view>
			</view>
		</view>
		
		<view class="m-right">
			<image class="head_icon" :src="userimg" v-if="message.user=='customer'"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				abosultPaht: "../../",
				name:'',
				// headImg:'',
				// userimg:''
			}
		},
		props: ['message', 'id','headImg','userimg'],
		mounted() {
			
			
		},
		methods:{
			
		},
		computed: mapState(['user'])
	}
</script>

<style scoped>
	.m-item {
		display: flex;
		flex-direction: row;
		padding-top: 40upx;
	}
	.m-left {
		display: flex;
		width: 120upx;
		justify-content: center;
		align-items: flex-start;
	}
	.m-content {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		word-break: break-all;
	}
	.m-right {
		display: flex;
		width: 120upx;
		justify-content: center;
		align-items: flex-start;
	}
	.head_icon {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.m-content-head {
		position: relative;
	}
	.m-content-head-right {
		display: flex;
		justify-content: flex-end;
	}
	.m-content-head-home {
		text-align: left;
		background: #D0E9FD;
		border: 1px #D0E9FD solid;
		border-radius: 20upx;
		padding: 20upx;
		color: #1A1A1A;
		max-width: 80%;
	}
	.m-content-head-home:before {
		border: 15upx solid transparent;
		border-right: 15upx solid #D0E9FD;
		left: -26upx;
		width: 0;
		height: 0;
		position: absolute;
		content: ' '
	}
	.m-content-head-customer {
		border: 1px #D0E9FD solid;
		background: #D0E9FD;
		border-radius: 20upx;
		padding: 20upx;
	}
	.m-content-head-customer:after {
		border: 15upx solid transparent;
		border-left: 15upx solid #D0E9FD;
		top: 20upx;
		right: -26upx;
		width: 0;
		height: 0;
		position: absolute;
		content: ' '
	}
	.imageitem{
		width: 320upx;
		height: 320upx;
		display: block;
		margin: 20upx;
	}
</style>